<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>个性推荐-控制台登录</title>
    <!--<link rel="icon" href="favicon.ico" type="image/x-icon"/>-->
    <link href="${basePath}/static/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/static/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${basePath}/static/libs/messenger/1.5.0/build/css/messenger.css" rel="stylesheet">
    <link href="${basePath}/static/libs/messenger/1.5.0/build/css/messenger-theme-block.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="${basePath}/static/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="${basePath}/static/libs/respond/1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <script src="${basePath}/static/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="${basePath}/static/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${basePath}/static/libs/messenger/1.5.0/build/js/messenger.min.js"></script>
    <script src="${basePath}/static/libs/vue/2.5.13/vue.min.js" type="text/javascript"></script>
    <script src="${basePath}/static/utils/http.js"></script>
    <script src="${basePath}/static/api/userAuthc.js"></script>
    <script>http.config({contextPath:'${rc.contextPath}'});</script>
    <style>
        body {
            background-color: #dddddd;
            /*background-color: #29b6f6 !important;*/
        }

        .login-box {
            width: 100%;
            max-width: 500px;
            height: 400px;
            position: absolute;
            top: 50%;
            margin-top: -200px;
            /*border: 1px solid silver;*/
            /*设置负值，为要定位子盒子的一半高度*/
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);
        }

        @media screen and (min-width: 500px) {
            .login-box {
                left: 50%;
                /*设置负值，为要定位子盒子的一半宽度*/
                margin-left: -250px;
            }
        }

        .login-content {
            height: 250px;
            width: 100%;
            max-width: 500px;
            /*background-color: rgba(255, 250, 2550, .6);*/
            background-color: #ffffff;
        }
        .login-content.login-form {
            padding-top: 50px;
        }
        .login-content.login-form .input-group {
            margin: 0px 0px 30px 0px !important;
        }
        .login-content.login-form .form-control, .input-group {
            width: 100%;
            height: 50px;
        }
        .login-content.login-form .input-group > .input-group-addon {
            width: 50px;
            font-size: 24px;
        }
        .login-content.login-form .form-group {
            margin-bottom: 0px !important;
        }

        .login-title {
            padding: 20px 10px;
            /*background-color: #2fa4e7;*/
            background-color: #009688 !important;
            height: 100px;
        }

        .login-title h1 {
            margin-top: 10px !important;
        }

        .login-title small {
            color: #fff;
        }

        .login-footer {
            height: 50px;
            background-color: #ffffff;
        }

        .login-footer .navbar-right{
            margin-right: 0!important;
        }

        .login-footer .navbar-right > li > a{
            cursor: pointer;
            padding-top: 15px;
            padding-bottom: 15px;
        }

        .login-footer .navbar-right > li > a:hover,.login-footer .navbar-right > li > a:focus{
            background-color: #ffffff;
            padding-top: 16px;
            padding-bottom: 12px;
        }

        .btn-sm {
            padding: 8px 24px !important;
            font-size: 16px !important;
        }

        .btn-phonecode {
            position: absolute;
            right: 3px;
            top: 3px;
            width: 110px;
            height: 46px;
            border: none;
            background: #f2f2f2;
            color: #333;
        }

    </style>
</head>
<body>
<div class="box">
    <div class="login-box">
        <div class="login-title text-center">
            <h1>
                <small>个性推荐－统一登陆入口</small>
            </h1>
        </div>
        <div class="login-content login-form" id="form">
            <form id="loginForm">
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-user"></span></span>
                            <input type="text" id="username" name="username" class="form-control" placeholder="用户名">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-lock"></span></span>
                            <input type="password" id="password" name="password" class="form-control"
                                   placeholder="密码">
                        </div>
                    </div>
                </div>
                <div class="form-group form-actions">
                    <div class="col-xs-12">
                        <button id="submit" type="button" data-loading-text="登录中..."
                                class="btn btn-sm btn-default btn-block"><span class="fa fa-power-off"></span> 登录
                        </button>
                    </div>
                </div>
            </form>
        </div>
        <div class="login-content login-form" style="display: none" id="sms">
            <form id="loginSms">
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-mobile"></span></span>
                            <input type="text" id="phone" name="phone" class="form-control" placeholder="手机号">
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-12  ">
                        <div class="input-group">
                            <span class="input-group-addon"><span class="fa fa-lock"></span></span>
                            <input type="text" id="sms_code" name="sms_code" class="form-control" style="width:70%;"
                                   placeholder="验证码">
                            <button id="getPhoneCode" class="btn-phonecode" type="button">获取验证码</button>
                        </div>

                    </div>
                </div>
                <div class="form-group form-actions">
                    <div class="col-xs-12">
                        <button id="smsSubmit" type="button" data-loading-text="登录中..."
                                class="btn btn-sm btn-default btn-block"><span class="fa fa-power-off"></span> 登录
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <div class="login-footer">
            <ul class="nav navbar-nav navbar-right">
                <li style="display: none"><a id="formhref">用户名密码登录</a></li>
                <li><a id="smshref">短信登录</a></li>
                <li><a id="qywxhref">企业微信登录</a></li>
            </ul>
        </div>
    </div>
</div>

<script>
    $(function () {

        var request = http.getRequest();
        var redirect = request['redirect'];

        var loginURPForm = $("#form");
        var loginSMSForm = $("#sms");

        /**
         * 按钮切换登录方式
         */
        $("#smshref").click(function () {//手机短信登录
            loginURPForm.hide();
            loginSMSForm.show();
            $(this).parent().siblings().show();
            $(this).parent().hide();
            smsLogin();
        });
        $("#formhref").click(function () {//用户名密码登录
            loginURPForm.show();
            loginSMSForm.hide();
            $(this).parent().siblings().show();
            $(this).parent().hide();
            formLogin();
        });
        $("#qywxhref").click(function () {//企业微信登录
            userAuthc.getQywxQr(redirect).then(res => {
                if (res.code == 1) {
                    //window.WwLogin(res.data);
                    http.route(res.data);
                }
            });
        });


        //表单登录
        function formLogin() {
            let loginBtn = $("#submit");
            loginBtn.on('click', function (e) {
                doLogin();
            });

            function doLogin() {
                loginBtn.button('loading');

                userAuthc.doLogin($("#username").val(), $("#password").val(), true).then(res => {
                    console.log(res);
                    loginBtn.button('reset');
                    if (res.code == 1) {
                        loginSuccess(res.data);
                    } else {
                        loginFail(res.msg);
                    }
                }, function (res) {
                    loginBtn.button('reset');
                });
            }

            document.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) {
                    doLogin();
                }
            };
        }

        //短信登录
        function smsLogin() {
            let smsSubmit = $("#smsSubmit");
            smsSubmit.on('click', function (e) {
                doSmSLogin();
            });

            function doSmSLogin() {
                smsSubmit.button('loading');

                userAuthc.doSmsLogin($("#phone").val(), $("#sms_code").val(), true).then(function (res) {
                    console.log(res);
                    smsSubmit.button('reset');
                    if (res.code == 1) {
                        loginSuccess(res.data);
                    } else {
                        loginFail(res.msg);
                    }
                }, function (res) {
                    smsSubmit.button('reset');
                });
            }

            document.onkeydown = function (event) {
                var e = event || window.event || arguments.callee.caller.arguments[0];
                if (e && e.keyCode == 13) {
                    doSmSLogin();
                }
            };

            //获取短信验证码
            $("#getPhoneCode").click(function () {
                userAuthc.getPhoneCode($("#phone").val()).then(res => {
                    console.log(res);

                    Messenger().post({
                        message: res.msg,
                        hideAfter: 1
                    });
                });

            });
        }

        /**
         * 公共处理三种登录方式成功或失败后的处理方式
         */
        function loginSuccess(data) {
            if (!redirect) {
                http.route("index.html");
            } else {
                http.route(redirect);
            }
        }

        function loginFail(msg) {
            $.globalMessenger.options = {
                extraClasses: 'messenger-fixed messenger-on-bottom',
                theme: 'block'
            };
            $.globalMessenger().post({
                message: msg,
                id: 'loginFail',
                type: 'error',
                showCloseButton: true
            });
        }

        formLogin();

    });
</script>
</body>
</html>